<template>
  <a-form layout="inline">
    <a-form-item>
      <a-input v-model:value="listParm.roleName" placeholder="请输入角色名称"></a-input>
    </a-form-item>
    <a-button @click="searchBtn">
      搜索
      <template #icon>
        <search-outlined />
      </template>
    </a-button>
    <a-button type="primary" danger style="margin-left: 15px;" @click="resetBtn">
      重置
      <template #icon>
        <close-outlined />
      </template>
    </a-button>
    <a-button @click="addBtn" type="primary" style="margin-left: 15px;">
      新增
      <plus-outlined />
    </a-button>
  </a-form>

  <!-- 新增弹框 -->
  <add-role ref="addRef" @save="save"></add-role>

  <!-- 表格操作 -->
  <a-table
      :dataSource="tableList.list"
      :scroll="{ y: tableHeight }"
      :pagination="rolePage"
      :columns="columns"
      bordered
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-button style="margin-right: 15px;" type="primary" @click="editBtn(record)">
          <template #icon>
            <edit-outlined />
          </template>
          编辑
        </a-button>
        <a-button style="margin-right: 15px;" type="primary" @click="assignBtn(record)">
          <template #icon>
            <form-outlined />
          </template>
          分配权限
        </a-button>
        <a-button type="primary" danger @click="deleteBtn(record)">
          <template #icon>
            <delete-outlined />
          </template>
          删除
        </a-button>
      </template>
    </template>
  </a-table>
  <assign-role ref="assignRef"></assign-role>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import useRole from "@/composable/role/useRole";
import AddRole from "@/views/system/role/component/AddRole.vue";
import useTable from '@/composable/role/useTable';
import AssignRole from "@/views/system/role/component/AssignRole.vue";

//表格操作
const { tableHeight, tableList, columns, listParm, rolePage, getList,searchBtn,resetBtn } = useTable()
//新增、编辑、删除
const { addBtn, addRef, editBtn, deleteBtn,save,assignBtn,assignRef } = useRole(getList)
</script>

<style scoped lang="scss">

</style>
